在開發專案時，通常需要使用到一些靜態檔案，比如圖片和字形等等。這些檔案應該被妥善地存放在一個統一的地方，以便有效地管理和使用，一起來看看靜態檔案的存放位置有哪些吧~

assets

通常存放樣式設定、字體、圖片，會經過 webpack 或 Vite 編譯打包，建置完成的檔案可以透過外部取得，但會包含 Hash 值，使用相對路徑引入資源。

什麼時侯放在 assets？

• 希望資源跟程式碼一起被打包，減少額外的網路請求。
• 希望在開發時如果路徑錯誤，會在編輯器直接報錯，而不是在瀏覽器上才顯示找不到內容。
• 希望資源不會因為 catch，而顯示錯誤的內容。

public

通常存放 favicon.ico、robots.txt。會在伺服器根目錄底下產生對應 /public 的路由檔案。
在開發或正式環境都可以透過：{server url}/images/favicon.ico 取得圖片檔案，使用絕對路徑引入資源。

public
 ┣ images 
 ┃   ┗ favicon.ico

什麼時侯放在 public？

• 希望直接透過資源檔名在外部取得內容。
• 函式庫可能跟 Webpack 不相容。
• 在 v-html 中使用相對路徑的檔案不會經過編譯變成 Hash 值檔名。

HTML tag：<img>

public/

public
 ┣ favicon.ico

src 的值同 public/ 對應的檔案路徑。

// app.vue
<template>
  <div>
    <img src="/favicon.ico" alt="icon">
  </div>
</template> 

（開發及建置完成）圖片網址為：/favicon.ico

assets/

Nuxt 3 預設的別名：

{
  "~": "/<rootDir>",
  "@": "/<rootDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "assets": "/<rootDir>/assets",
  "public": "/<rootDir>/public"
}

<img> 可以透過 ~/assets/{檔案名稱} 來取得檔案，替換成 "@"、"~~"、"@@" 為同樣效果。

<template>
  <div>
    <img src="~/assets/favicon.ico" alt="icon">
  </div>
</template> 

（開發時）圖片網址為：/_nuxt/assets/favicon.ico

（建置完成時）圖片網址為：/_nuxt/favicon.1057b17a.ico

但在 <template> 不可以透過 assets/{檔案名稱} 來取得檔案，僅能在 <script> 中透過 assets/{檔案名稱} 方式匯入。

<template>
  <div>
    <img :src="logo" alt="icon">
  </div>
</template> 

<script setup>
import logo from "assets/favicon.ico";
</script>

Nuxt Image

Nuxt Image 是官方提供的套件之一，能自動最佳化圖片，且有許多屬性可以設定，使圖片可以更容易地達成響應式，還可以設定圖片的 quality 來壓縮檔案的大小降低網頁負擔。

安裝步驟

Step 1

在專案目錄下的 terminal 執行以下安裝命令。

> pnpm add @nuxt/image@rc

語法解釋

@rc：表示安裝的版本即將成為正式版本，但還在測試階段的的候選版本（Release Candidate），如果想安裝穩定版本的話可以忽略 @rc，執行 pnpm add @nuxt/image 即可。

Step 2

在 nuxt.config.ts 加入以下程式碼，使專案增加 @nuxt/image module。

export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ]
})

如何使用

// app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>

Step 1

在 public/ 加入要使用的圖片。

public
 ┣ cuteDog.png 
 ┣ favicon.ico  => ipx 不支援此檔案格式

Step 2

在 pages/ 建立 images.vue。

pages
 ┣ images.vue

Step 3

加入以下程式碼。

// pages/images.vue
<template>
  <div>
    <NuxtImg src="/cuteDog.png" />
  </div>
</template>

Step 4

查看結果。

圖片網址為：/_ipx/_/cuteDog.png。

Providers

Nuxt Image 使用 Providers 整合第三方的圖片服務，透過設定調整圖片最佳化，預設使用 IPX，也可以使用其他 Providers 或是自定義 Provider。

根據官方文件所描述

圖片預設路徑是 public/，如果放在 assets/ 會被視為被 webpack 打包的檔案所以不會經過Nuxt Image 處理。

但仍然可以透過 dir 設定路徑位置

export default defineNuxtConfig({
  image: {
    dir: 'assets'
  }
})

🌞 Upcoming

今天介紹了 assets/ 跟 public/ 的差異和 Nuxt Image 的使用方式，明天會繼續深入介紹 Nuxt Image。

參考資料：

NuxtImg
nuxt-v3-assets-vs-public